import React, { Component} from 'react'
import PropTypes from 'prop-types'
import * as utils from '@/utils/index.js'
import config from '@/config'
import PanelMode from '@/components/panel/panel-mode'
import beautify from 'js-beautify'
import actionsCreater from '@/store/actions'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { observer, inject } from 'mobx-react'
var toCss = require('to-css')

const actions = actionsCreater()

const clsPrefix = config.clsPrefix

@inject('rootStore')
@observer
class MenuBar extends Component {
	constructor(props) {
        super(props)
        this.state = {
			
        }
        this.popper = null
    }
   	componentWillReceiveProps(nextProp){
	}
	componentDidMount(){
    
    }
    popperUpdate(){
        this.popper.update()
    }
    _export(){
		let { rootStore } = this.props
		let { nodeTree } = rootStore
		if(license.status!=0){
			rootStore.showLicenseDialog(true)
			return
		}
		try{
			var { lessStyle, htmlImages, licenseStatus } = utils.getLessStyle(nodeTree)
		}catch(e){
			if(process.env.NODE_ENV == 'development'){
				console.log(e);
			}
			if(!licenseStatus){
				rootStore.showLicenseDialog(true)
			}
			
		}
		

		window.htmlImages = htmlImages
		
		lessStyle = toCss(lessStyle);
		
		lessStyle = beautify.css(lessStyle, {
			indent_size: 2,
			"end_with_newline": true,
		})

		let outputPath = config.path.output

		if(globalThis===window){

		}else{
			fs.mkdir(outputPath, function(err) {
				fs.exists(outputPath, function(exists) {
				})
			})
		
			fs.writeFile(`${outputPath}/style.less`, lessStyle,function(err) {
			});
	
			
		}
		less.render(lessStyle, { plugins: [] }).then(function(output) {
			$("#paper-style").text(output.css)
			if(globalThis === window){

			}else{
				fs.writeFile(`${outputPath}/style.css`, output.css,function(err) {
					if(!err){
						let _outputPath=outputPath.replace(/\//g,"\\")
						$notification.show({msg:`output to "${_outputPath}" success !`, autoHideDuration: 300, disableWindowBlurListener: true})		
					}
				});
			}
		},function(error) {
		});
		
		//-----HTML
		rootStore.updateExportStatus(true)
		setTimeout(()=>{
			rootStore.updateExportStatus(false)
		},0)
	}
	setting_toggle(){
		const {rootStore,editConfig}=this.props
		rootStore.setConfigStatus(!editConfig)
	}
	render() {
        const { editConfig } = this.props.rootStore
		return (
			<div className={`${clsPrefix}menu-bar`}>
                <i className="menu-item fa  fa-sign-out" onClick={this._export.bind(this)}>&nbsp;export</i>
				<PanelMode />
				<i className={classnames("menu-item fa fa-cog fa-fw",{active:editConfig})} onClick={this.setting_toggle.bind(this)}></i>
				{this.props.children}
			</div>
		)
	}
}

MenuBar.defaultProps = {
};

// function mapStateToProps(state) {
// 	return {
// 		nodeTree: state.nodeTree,
// 		exportStatus: state.exportStatus,
// 		license: state.license,
// 		editConfig: state.editConfig
// 	}
// }
// function maprootStoreToProps(rootStore) {
// 	return {
// 		rootStore:bindActionCreators(actions, rootStore)
// 	}
// }

// export default connect(
// 	mapStateToProps,
// 	maprootStoreToProps
// )(MenuBar)

export default MenuBar